<template>
  <div class="comment-main">
    <div class="comment-item card" v-for="comment in state.commentList " :key="comment.id">
      <p class="comment-content">{{ comment.content }}</p>
      <p style="display: flex;align-items: center;margin-top: 5px"><span class="time">{{ comment.createTime }}</span>
        <el-icon class="delete" style="margin-left: 10px" :size="14" @click="deleteComment(comment.id)">
          <Delete/>
        </el-icon>
      </p>
    </div>
    <LoadMore v-show="state.commentList.length>0" @load="loadMore"/>
    <el-empty description="你还暂未发布任何评论" v-if="state.commentList.length===0"/>
  </div>
</template>

<script setup>
import {Delete} from "@element-plus/icons-vue";
import {onMounted, reactive} from "vue";
import {useLoginStore} from "@/store/index.js";
import CommentApi from "@/api/CommentApi.js";
import {ElMessage, ElMessageBox} from "element-plus";
import AuthApi from "@/api/Auth.js";
import LoadMore from "@/components/LoadMore.vue";

const {getUserLoginInfo} = useLoginStore()
const state = reactive({
  commentList: [],
  queryDto: {
    pageNum: 1,
    size: 10,
    userId: getUserLoginInfo().userId
  },
  stopLoadMore: false
})
const getCommentList = (isAppend) => {
  CommentApi.getUserCommentList(state.queryDto).then(res => {
    if (res.data.data && res.data.data.length > 0) {
      if (isAppend) {
        res.data.data.forEach(r => {
          state.commentList.push(r)
        })
      }
      state.commentList = res.data.data
    } else {
      state.stopLoadMore = true
    }
  })
}
onMounted(() => {
  getCommentList(false)
})

const loadMore = () => {
  if (!state.stopLoadMore) {
    state.queryDto.pageNum = state.queryDto.pageNum + 1
    getCommentList(true)
  }
}
const deleteComment = (commentId) => {
  ElMessageBox.confirm(
      '确定要删除该评论吗（同时会删除该评论下的所有回复）？',
      '删除评论',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }
  ).then(() => {
    CommentApi.deleteComment(commentId).then(res=>{
      if (!res.flag){
        ElMessage.error(res.message)
        return
      }
      ElMessage.success("删除成功")
      state.queryDto.pageNum = 1
      getCommentList(false)
    })
  })
}
</script>

<style scoped lang="less">
.comment-main {
  height: 95%;
  overflow-y: scroll;
  scrollbar-width: none;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.72);
}

.comment-item {
  margin: 10px auto;
  width: 98%;

  .comment-content {

  }

  .time {
    font-size: 12px;
  }
}

.card {
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.72);
  cursor: pointer;
}

.delete:hover {
  cursor: pointer;
  color: #00aadf;

}
</style>